<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/port_company_home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>出库表管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card>
      <!--搜索和添加区域-->
      <el-row :gutter="20">
        <el-col :span="15">
          <el-input
            placeholder="提单号"
            v-model="queryInfo.out_house_id"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="get"
            ></el-button>
          </el-input>
        </el-col>

        <!--添加按钮区-->
        <el-col :span="2">
          <el-button
            type="primary"
            @click="addDialogVisiable=true"
          >添加出库表</el-button>
        </el-col>
        <!--删除按钮区-->
        <el-col :span="2">
          <el-button
            type="danger"
            @click="deleteDialogVisiable=true"
          >删除出库表</el-button>
        </el-col>
        <!--修改按钮区-->
        <el-col :span="2">
          <el-button
            type="info"
            @click="modifyDialogVisiable=true"
          >修改出库表</el-button>
        </el-col>
      </el-row>

      <!--出库表列表区 挂载datalist-->
      <el-table
        :data="datalist"
        border
        stripe
      >
        <!--索引-->
        <el-table-column type="index"></el-table-column>
        <!--指定数据源!-->
        <el-table-column
          label="提单号"
          prop="Out_house_id"
        >
        </el-table-column>

        <el-table-column
          label="仓库号"
          prop="Out_house_house_id"
        >
        </el-table-column>

        <el-table-column
          label="出库时间"
          prop="Out_house_time"
        >
        </el-table-column>

        <el-table-column
          label="货车号"
          prop="Out_house_car"
        >
        </el-table-column>
        <el-table-column
          label="出库件数"
          prop="Out_house_count"
        >
        </el-table-column>
        <el-table-column
          label="出库吨数"
          prop="Out_house_tun"
        >
        </el-table-column>
        <el-table-column
          label="仓储费"
          prop="Out_house_cost"
        >
        </el-table-column>
      </el-table>
    </el-card>

    <!--出库表查询区-->
    <div>出库表查询区</div>
    <el-table
      :data="test_datalist"
      border
      stripe
    >
      <!--指定数据源!-->

      <el-table-column
        label="提单号"
        prop="Out_house_id"
      >
      </el-table-column>

      <el-table-column
        label="仓库号"
        prop="Out_house_house_id"
      >
      </el-table-column>

      <el-table-column
        label="出库时间"
        prop="Out_house_time"
      >
      </el-table-column>

      <el-table-column
        label="货车号"
        prop="Out_house_car"
      >
      </el-table-column>
      <el-table-column
        label="出库件数"
        prop="Out_house_count"
      >
      </el-table-column>
      <el-table-column
        label="出库吨数"
        prop="Out_house_tun"
      >
      </el-table-column>
      <el-table-column
        label="仓储费"
        prop="Out_house_cost"
      >
      </el-table-column>

    </el-table>

    <!--按钮区域-->
    <!--添加出库表对话框-->
    <el-dialog
      title="添加出库表"
      :visible.sync="addDialogVisiable"
      width="50%"
      @close="addDialogClosed"
    >
      <!--新增出库表时的显示信息主体区域-->
      <span>
				<el-form
          :model="addForm"
          :rules="addFormRules"
          width="50%"
          label-width="100px"
          ref="addFormRef"
        >
          <el-form-item
            label="提单号"
            prop="out_house_id"
          >
						<el-input v-model="addForm.out_house_id"></el-input>
					</el-form-item>

					<el-form-item
            label="仓库号"
            prop="out_house_house_id"
          >
						<el-input v-model="addForm.out_house_house_id"></el-input>
					</el-form-item>

          <el-form-item
            label="出库时间"
            prop="out_house_time"
          >
						<el-input v-model="addForm.out_house_time"></el-input>
					</el-form-item>

          <el-form-item
            label="货车号"
            prop="out_house_car"
          >
						<el-input v-model="addForm.out_house_car"></el-input>
					</el-form-item>

          <el-form-item
            label="出库件数"
            prop="out_house_count"
          >
						<el-input v-model="addForm.out_house_count"></el-input>
					</el-form-item>

          <el-form-item
            label="出库吨数"
            prop="out_house_tun"
          >
						<el-input v-model="addForm.out_house_tun"></el-input>
					</el-form-item>
				</el-form>

			</span>
      <!--底部区域-->
      <span
        slot="footer"
        class="dialog-footer"
      >
				<el-button @click="addDialogVisiable = false">取消</el-button>
				<el-button
          type="primary"
          @click="add"
        >确定</el-button>
			</span>
    </el-dialog>

    <!--删除对话框-->
    <el-dialog
      title="删除出库表"
      :visible.sync="deleteDialogVisiable"
      width="50%"
      @close="deleteDialogClosed"
    >
      <!--删除时的显示信息主体区域-->
      <span>
				<el-form
          :model="deleteForm"
          :rules="deleteFormRules"
          width="50%"
          label-width="80px"
          ref="deleteFormRef"
        >
					<el-form-item
            label="提单号"
            prop="out_house_id"
          >
						<el-input v-model="deleteForm.out_house_id"></el-input>
					</el-form-item>
				</el-form>
			</span>
      <!--底部区域-->
      <span
        slot="footer"
        class="dialog-footer"
      >
				<el-button @click="deleteDialogVisiable = false">取消</el-button>
				<el-button
          type="primary"
          @click="delete1"
        >确定</el-button>
			</span>

    </el-dialog>

    <!--修改对话框-->
    <el-dialog
      title="修改出库表"
      :visible.sync="modifyDialogVisiable"
      width="50%"
      @close="modifyDialogClosed"
    >
      <!--修改时的显示信息主体区域-->
      <span>
				<el-form
          :model="modifyForm"
          :rules="modifyFormRules"
          width="50%"
          label-width="100px"
          ref="modifyFormRef"
        >
          <el-form-item
            label="提单号"
            prop="out_house_id"
          >
						<el-input v-model="modifyForm.out_house_id"></el-input>
					</el-form-item>

					<el-form-item
            label="仓库号"
            prop="out_house_house_id"
          >
						<el-input v-model="modifyForm.out_house_house_id"></el-input>
					</el-form-item>

          <el-form-item
            label="出库时间"
            prop="out_house_time"
          >
						<el-input v-model="modifyForm.out_house_time"></el-input>
					</el-form-item>

          <el-form-item
            label="货车号"
            prop="out_house_car"
          >
						<el-input v-model="modifyForm.out_house_car"></el-input>
					</el-form-item>

          <el-form-item
            label="出库件数"
            prop="out_house_count"
          >
						<el-input v-model="modifyForm.out_house_count"></el-input>
					</el-form-item>

          <el-form-item
            label="出库吨数"
            prop="out_house_tun"
          >
						<el-input v-model="modifyForm.out_house_tun"></el-input>
					</el-form-item>
				</el-form>

			</span>
      <!--底部区域-->
      <span
        slot="footer"
        class="dialog-footer"
      >
				<el-button @click="modifyDialogVisiable = false">取消</el-button>
				<el-button
          type="primary"
          @click="modify"
        >确定</el-button>
			</span>
    </el-dialog>

  </div>
</template>

<script>
export default{
  data(){
    return{
      queryInfo:{
        out_house_id:'',
      },
      datalist:[], //这里存放后端发送的数据
      test_datalist:[],//存放要查询的的信息

      //控制添加商品的对话框
      addDialogVisiable:false,	//添加对话框
      modifyDialogVisiable:false,	//修改对话框
      deleteDialogVisiable:false,	//删除对话框

      //添加的数据
      addForm:{
        out_house_id: "",
        out_house_house_id: "",
        out_house_time: "",
        out_house_car: "",
        out_house_count: "",
        out_house_tun: "",
      },
      //删除的数据
      deleteForm:{
        out_house_id:"",
      },
      //修改的数据
      modifyForm:{
        out_house_id: "",
        out_house_house_id: "",
        out_house_time: "",
        out_house_car: "",
        out_house_count: "",
        out_house_tun: "",
      },
      //添加的验证规则对象
      addFormRules:{
        out_house_id:[
          {required:true,message:"请输入提单号",trigger:"blur"},
        ],
        out_house_house_id:[
          {required:true,message:"请输入出仓库号",trigger:"blur"},
        ],
        out_house_time:[
          {required:true,message:"请输入出库时间",trigger:"blur"},
        ],
        out_house_car:[
          {required:true,message:"请输入货车号",trigger:"blur"},
        ],
        out_house_count:[
          {required:true,message:"请输入出库件数",trigger:"blur"},
        ],
        out_house_tun:[
          {required:true,message:"请输入出库吨数",trigger:"blur"},
        ],
      },
      //修改的验证规则对象
      modifyFormRules:{
        out_house_id:[
          {required:true,message:"请输入提单号",trigger:"blur"},
        ],
        out_house_house_id:[
          {required:true,message:"请输入仓库号",trigger:"blur"},
        ],
        out_house_time:[
          {required:true,message:"请输入出库时间",trigger:"blur"},
        ],
        out_house_car:[
          {required:true,message:"请输入货车号",trigger:"blur"},
        ],
        out_house_count:[
          {required:true,message:"请输入出库件数",trigger:"blur"},
        ],
        out_house_tun:[
          {required:true,message:"请输入出库吨数",trigger:"blur"},
        ],
      },
      //删除的验证规则对象
      deleteFormRules:{
        out_house_id:[
          {required:true,message:"请输入提单号",trigger:"blur"},
        ],
      },

    }
  },
  created(){
    this.show()
  },
  methods:{
    async show(){
      const {data:res} = await this.$http.post('show_out_house',{
        params: this.queryInfo
      })
      console.log(res)
      console.log(this.queryInfo.out_house_id)
      this.datalist = res.out_house
      console.log(this.datalist)
    },

    async get(){ //点击按钮，获取某一出库表的信息
      console.log(this.queryInfo.port_company_name)
      const {data:res} =await this.$http.post('get_out_house',this.queryInfo).catch(() => this.$message.error("查找失败，不存在该对象")) //向后端发送查询请求
      console.log(res)
      this.test_datalist = res.out_house
      console.log(this.test_datalist)
      this.$message.success("查询成功")
    },

    //监听添加对话框的关闭事件
    addDialogClosed(){
      this.$refs.addFormRef.resetFields()
    },

    //监听删除对话框的关闭事件
    deleteDialogClosed(){
      this.$refs.deleteFormRef.resetFields()
    },

    //监听修改对话框的关闭事件
    modifyDialogClosed(){
      this.$refs.modifyFormRef.resetFields()
    },

    //点击按钮，添加出库表
    add(){
      this.$refs.addFormRef.validate( async valid => {
        // console.log(valid)
        if (!valid) return
        //验证通过 可以添加
        const {data:res} = await this.$http.post("add_out_house", this.addForm).catch(() => this.$message.error("添加失败"))
        console.log(res)

        if(res.code == "200"){
          this.$message.success("添加成功！")
        }

        //隐藏添加的对话框
        this.addDialogVisiable = false
        //刷新列表，重新获得后端数据库中数据
        this.show()
      })
    },

    //点击按钮，删除出库表
    delete1(){
      this.$refs.deleteFormRef.validate( async valid => {
        // console.log(valid)
        if (!valid) return
        //验证通过 可以删除
        const {data:res} = await this.$http.post("delete_out_house", this.deleteForm).catch(() => this.$message.error("删除失败"))
        console.log(res)

        if(res.code == "200"){
          this.$message.success("删除成功！")
        }

        //隐藏删除的对话框
        this.deleteDialogVisiable = false
        //刷新列表，重新获得后端数据库中数据
        this.show()
      })
    },

    //点击按钮，修改出库表
    modify(){
      this.$refs.modifyFormRef.validate( async valid => {
        // console.log(valid)
        if (!valid) return
        const {data:res} = await this.$http.post("update_out_house", this.modifyForm).catch(() => this.$message.error("修改失败"))
        console.log(res)

        if(res.code == "200"){
          this.$message.success("修改成功！")
        }

        //隐藏修改的对话框
        this.modifyDialogVisiable = false
        //刷新列表，重新获得后端数据库中数据
        this.show()
      })
    }
  }
}
</script>
<style scoped>
</style>
